<template>
  <el-dialog title="物料申请" :visible.sync="dialogVisible" @close="closeFn" width="70%">
    <div class="">
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          style="width: 100%"
          height="400"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            prop="name"
            label="物料名称"
            align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="仓库"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="number"
            label="可借库存"
            width="140"
            align="center">
          <template slot-scope="scope">
            {{ scope.row.number }} / {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column
            prop="apply"
            label="申请数量"
            align="center">
          <template slot-scope="scope">
            <div class="applyBtnbox">
              <span class="el-icon-remove-outline left-box"
                    :class="arryList[scope.$index].num==1?'noneClick':'btnapply'"
                    @click="richbox(1,scope.$index)"></span>
              <el-input auto-complete="off" placeholder="填写申请数量" v-model="arryList[scope.$index].num"
                        @change="numChange(scope.$index)" size="mini"></el-input>
              <span class="el-icon-circle-plus-outline right-box"
                    :class="arryList[scope.$index].num==arryList[scope.$index].number?'noneClick':'btnapply'"
                    @click="richbox(2,scope.$index)"></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="apply"
            label="申请理由"
            align="center">
          <template slot-scope="scope">
            <div class="applyBtnbox">
              <!--<span class="el-icon-remove-outline left-box btnapply"></span>-->
              <el-input auto-complete="off" placeholder="填写申请理由" v-model="arryList[scope.$index].content"
                        @change="contentChange(scope.$index)" size="mini"></el-input>
              <!--<span class="el-icon-circle-plus-outline right-box btnapply"></span>-->
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="100"
            align="center">
          <template slot-scope="scope" align="center">
            <el-button type="danger" size="small" @click="detelFn(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn()" size="small">返回再选择</el-button>
      <el-button type="primary" size="small" @click="formCheck">确认申请</el-button>
    </span>
  </el-dialog>
</template>
<script>

export default {
  name: 'Dialog',
  props: ['visible', 'eidtOption'],
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('this.eidtOption:', this.eidtOption)
        for (let i in this.eidtOption) {
          this.arryList.push(this.eidtOption[i])
        }
      } else {
        this.arryList = []
        this.value1 = ''
      }
    },
    arryList() {
      console.log('变更：')
    }
    // arryList: {
    //   immediate: true,
    //   handler(val) {
    //     console.log('变更：', val)
    //   }
    // }
  },
  data() {
    return {
      dialogVisible: this.visible,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      value1: '',
      arryList: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() //  - 8.64e7 减去就是不包含今天的
        }
      }
    }
  },
  created() {
    // this.classList()
  },
  methods: {
    formCheck() {
      this.$emit('submitApplyBook', this.arryList)
    },
    detelFn(index) {
      console.log('选择当前的id：', index)
      this.$emit('detelBook', this.arryList[index].id)
      this.arryList.splice(index, 1)
    },
    richbox(option, index) {
      // option 1 减法 2 加法 number 库存 num 当前数量
      if (option === 1) {
        if (this.arryList[index].num > 1) {
          this.arryList[index].num--
        }
      } else {
        if (this.arryList[index].num < this.arryList[index].number) {
          this.arryList[index].num++
        } else {
          // this.$message.error('库存不')
        }
      }
    },
    numChange(index) {
      let re = /^[0-9]+.?[0-9]*/// 判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
      if (!re.test(this.arryList[index].num)) {
        this.arryList[index].num = 1
        return
      }
      if (this.arryList[index].num > this.arryList[index].number) {
        this.$message.error('库存不足')
        this.arryList[index].num = this.arryList[index].number
        return
      }
      this.$emit('changeApply', this.arryList)
    },
    contentChange() {
      this.$emit('changeApply', this.arryList)
    },
    closeFn(){
      this.$emit('update:visible',false)
    }
  }
}
</script>

